<template>
  <div>
    <div class="index-bg h-[560px]" id="section">
      <div class="index-bg-content h-[300px]">
        <div class="center index-bg-content-main">
          <div
            class="common-bg w-[40%] mr-[30px] main-left relative"
            v-aos="'fade-right'"
          >
            <!-- 名字 -->
            <div class="text-center common-bd-btn pt-[20px]">
              <div class="font-[700] text-[20px]">一个热爱前端的全栈小胖子</div>
              <div class="mt-[30px] text-[16px]">" Hi ! 👋 "</div>
            </div>

            <!-- 地址 -->
            <div
              class="text-center common-bd-btn mt-[30px] flex justify-center"
            >
              <img
                class="pointer w-[25px] h-[25px] mr-[20px]"
                :src="item.src"
                alt=""
                v-for="(item, index) in iconList"
                :key="index"
                @click="jumpDetails(item)"
              />
            </div>

            <!-- 介绍 -->
            <div class="mt-[30px] text-[16px]">
              <div
                class="flex justify-between mt-[20px]"
                v-for="(item, index) in introduceList"
                :key="index"
              >
                <div class="text-[#00283a] font-[700]">{{ item.key }}</div>
                <div class="text-[#7b7b7d]">{{ item.value }}</div>
              </div>

              <div class="mt-[30px] flex">
                <n-image
                  class="w-[100px] h-[150px] mr-[20px]"
                  :src="item.src"
                  alt=""
                  v-for="(item, index) in ewmList"
                  :key="index"
                />
              </div>
            </div>

            <!-- 头像 -->
            <img
              class="w-[130px] h-[130px] rounded-[50%] absolute top-[-105px] left-[30%]"
              :src="getImageAbsolutePath('tx.jpg')"
              alt=""
            />
          </div>

          <div class="w-[100%]" v-aos="'fade-left'">
            <!-- 头部文字 -->
            <div>
              <div class="text-[1.2rem] font-[700] text-[#fff]">
                Hi! I'm WANG CHUN ZHENG
              </div>

              <div class="right-word">
                <div>Welcome To My Personal</div>
                <div>Homepage! Let's Go!</div>
              </div>
            </div>

            <!-- 介绍 -->
            <div class="flex justify-between main-right-introduce">
              <div
                class="flex-1 mr-5 mt-10 text-center common-bg-only"
                v-for="(item, index) in cardList"
                :key="index"
              >
                <div
                  class="common-bd-btn text-[#00283a] text-[24px] font-[700]"
                >
                  {{ item.key }}
                </div>
                <div class="mt-[30px]">{{ item.value }}</div>
              </div>
            </div>

            <!-- About -->
            <card-slot class="main-right-tips">
              <template #title>
                <div>🎯 About</div>
              </template>

              <template #page>
                <div>01</div>
              </template>

              <div class="common-bg-only text-effect">
                大家好，我叫王春正，是一位全栈工程师，但我对前端开发情有独钟。我在这个网站上将会详细介绍我的项目经验，并分享一些代码片段和个人总结。我熟悉使用现代的前端技术栈，如HTML、CSS、JavaScript，并且有扎实的React和Vue框架的经验。我注重代码质量和可维护性，遵循最佳实践和设计模式，以确保项目的可扩展性和可靠性。期待与大家进行沟通和交流，谢谢！
              </div>
            </card-slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getImageAbsolutePath } from "~/utils/tool";

const iconList = ref([
  {
    src: getImageAbsolutePath("csdn.png"),
    url: "https://blog.csdn.net/weixin_70243424?type=blog",
  },
  {
    src: getImageAbsolutePath("ydybj.png"),
    url: "https://note.youdao.com/s/Eobfzzoy",
  },
]);

const introduceList = ref([
  { key: "城市：", value: "内蒙古鄂尔多斯" },
  { key: "微信号：", value: "wang1135141311" },
  { key: "手机号：", value: "1300000000" },
  { key: "邮箱：", value: "wangchunzheng@163.com" },
]);

const ewmList = ref([
  {
    src: getImageAbsolutePath("wx-ewm.jpg"),
  },
  {
    src: getImageAbsolutePath("qq-ewm.png"),
  },
]);

const cardList = ref([
  { key: "Vue、php", value: "语言框架" },
  { key: "2 +", value: "实战经验" },
  { key: "30+", value: "项目合作" },
]);

const jumpDetails = (item: any) => {
  window.open(item.url);
};
</script>

<style lang="less" scoped>
.index-bg {
  background-image: url("@/assets/img/bg.jpg");
  background-attachment: fixed;
  background-position: 50%;
  background-size: cover;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 2px 20px #0000001a;
  height: 560px;
  position: relative;
  transition: all 0.4s linear;

  .index-bg-content {
    background-image: linear-gradient(180deg, #000, transparent, transparent);

    .index-bg-content-main {
      display: flex;
      padding-top: 200px;

      .right-word {
        background: url("@/assets/img/word-bg.png");
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 3.5rem;
        font-weight: 700;
        line-height: 1.2;
        text-shadow: 0 1px 10px hsla(0, 0%, 100%, 0.2);
      }

      .text-effect {
        font-size: 16px;
        font-weight: bold;
        background: linear-gradient(90deg, #333, #feb47b);
        -webkit-background-clip: text;
        color: transparent;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      }
    }
  }
}

// 小于1140
@media screen and (max-width: 1140px) {
  .main-left {
    display: none;
  }
}

// 小于650
@media screen and (max-width: 650px) {
  .main-right-introduce {
    display: none;
  }

  .main-right-tips {
    margin-top: 150px;
  }
}

@media screen and (max-width: 635px) {
  .main-right-tips {
    margin-top: 90px;
  }
}
</style>
